<html>
  <head>
    <style>
      body {
        margin: 10px;
        padding: 0px;
      }

    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="500" style="border:1px solid #000000;"></canvas>
    <script>
      function Graph(config) {

        this.canvas = document.getElementById(config.canvasId);
        this.minX = config.minX;
        this.minY = config.minY;
        this.maxX = config.maxX;
        this.maxY = config.maxY;
        this.unitsPerTick = config.unitsPerTick;

        this.axisColor = '#aaa';
        this.font = '8pt Calibri';
        this.tickSize = 20;

        this.context = this.canvas.getContext('2d');
        this.rangeX = this.maxX - this.minX;
        this.rangeY = this.maxY - this.minY;
        this.unitX = this.canvas.width / this.rangeX;
        this.unitY = this.canvas.height / this.rangeY;
        this.centerY = Math.round(Math.abs(this.minY / this.rangeY) * this.canvas.height);
        this.centerX = Math.round(Math.abs(this.minX / this.rangeX) * this.canvas.width);
        this.iteration = (this.maxX - this.minX) / 1000;
        this.scaleX = this.canvas.width / this.rangeX;
        this.scaleY = this.canvas.height / this.rangeY;

        this.drawXAxis();
        this.drawYAxis();
      }

      Graph.prototype.drawXAxis = function() {
        var context = this.context;
        context.save();
        context.beginPath();
        context.moveTo(0, this.centerY);
        context.lineTo(this.canvas.width, this.centerY);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();

        var xPosIncrement = this.unitsPerTick * this.unitX;
        var xPos, unit;
        context.font = this.font;
        context.textAlign = 'center';
        context.textBaseline = 'top';

        xPos = this.centerX - xPosIncrement;
        unit = -1 * this.unitsPerTick;
        while(xPos > 0) {
          context.moveTo(xPos, this.centerY - this.tickSize / 2);
          context.lineTo(xPos, this.centerY + this.tickSize / 2);
          context.stroke();
          context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
          unit -= this.unitsPerTick;
          xPos = Math.round(xPos - xPosIncrement);
        }

        xPos = this.centerX + xPosIncrement;
        unit = this.unitsPerTick;
        while(xPos < this.canvas.width) {
          context.moveTo(xPos, this.centerY - this.tickSize / 2);
          context.lineTo(xPos, this.centerY + this.tickSize / 2);
          context.stroke();
          context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3);
          unit += this.unitsPerTick;
          xPos = Math.round(xPos + xPosIncrement);
        }
        context.restore();
      };

      Graph.prototype.drawYAxis = function() {
        var context = this.context;
        context.save();
        context.beginPath();
        context.moveTo(this.centerX, 0);
        context.lineTo(this.centerX, this.canvas.height);
        context.strokeStyle = this.axisColor;
        context.lineWidth = 2;
        context.stroke();

        var yPosIncrement = this.unitsPerTick * this.unitY;
        var yPos, unit;
        context.font = this.font;
        context.textAlign = 'right';
        context.textBaseline = 'middle';

        yPos = this.centerY - yPosIncrement;
        unit = this.unitsPerTick;
        while(yPos > 0) {
          context.moveTo(this.centerX - this.tickSize / 2, yPos);
          context.lineTo(this.centerX + this.tickSize / 2, yPos);
          context.stroke();
          context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
          unit += this.unitsPerTick;
          yPos = Math.round(yPos - yPosIncrement);
        }

        yPos = this.centerY + yPosIncrement;
        unit = -1 * this.unitsPerTick;
        while(yPos < this.canvas.height) {
          context.moveTo(this.centerX - this.tickSize / 2, yPos);
          context.lineTo(this.centerX + this.tickSize / 2, yPos);
          context.stroke();
          context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos);
          unit -= this.unitsPerTick;
          yPos = Math.round(yPos + yPosIncrement);
        }
        context.restore();
      };

      Graph.prototype.drawEquation = function(equation, color, thickness) {
        var context = this.context;
        context.save();
        context.save();
        this.transformContext();

        context.beginPath();
        context.moveTo(this.minX, equation(this.minX));

        for(var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) {
          context.lineTo(x, equation(x));
        }

        context.restore();
        context.lineJoin = 'round';
        context.lineWidth = thickness;
        context.strokeStyle = color;
        context.stroke();
        context.restore();
      };

      Graph.prototype.transformContext = function() {
        var context = this.context;

        this.context.translate(this.centerX, this.centerY);
        context.scale(this.scaleX, -this.scaleY);
      };
      
	function Selecting(func) {
	if (func == "sinx")
	    myGraph.drawEquation(function(x) {
        return 1 * Math.sin(x);
      }, 'green', 3);

	if (func == "xx")
      myGraph.drawEquation(function(x) {
        return x * x;
      }, 'blue', 3);
	  
	if (func == "lnx")
      myGraph.drawEquation(function(x) {
        return 1 * Math.log(x);
      }, 'red', 3);
	  
	if (func == "cosx")
       myGraph.drawEquation(function(x) {
        return 1 * Math.cos(x);
      }, 'orange', 3);
	  
	 if (func == "ex")
       myGraph.drawEquation(function(x) {
        return 1 * Math.exp(x);
      }, 'purple', 3);

	 if (func == "clear") {
		location.reload()
	  };
	}
	
	// Задаем параметры осей
	var myGraph = new Graph({
        canvasId: 'myCanvas',
        minX: -6,
        minY: -2,
        maxX: 6,
        maxY: 2,
        unitsPerTick: 1
      });

	</script>
	
<select name="graph" onchange="Selecting(this.value)">
<option value="clear">-cleared-</option>
<option value="sinx" style='color:green'>Sin x</option>
<option value="cosx" style='color:orange'>Cos x</option>
<option value="lnx" style='color:red'>Ln x</option>
<option value="ex" style='color:purple'>e^x</option>
<option value="xx" style='color:blue'>x^2</option>
</select>

<button name="CLEAR" onclick="Selecting(this.value)" value="clear">Clear all</button>

  </body>
</html>